<template>
    <div class="edu-page-warp">
        <InnerBreadcrumb v-model="pageIndex" :path="breadPath"></InnerBreadcrumb>
        <div v-if="pageIndex === 1">
            <ConditionCard
                shadow="never"
                body-style="padding: 24px 24px 6px 24px;"
                @search="searchMyInformations"
                @reset="reset"
            >
                <el-form
                    ref="queryForm"
                    :model="queryForm"
                    label-position="right"
                    label-width="100px"
                >
                    <el-row :gutter="20" style="height: 50px;">
                        <el-col :span="8">
                            <el-form-item :label="$t('信息标题') + ' :'" prop="title">
                                <el-input
                                    v-model="searchParam.title"
                                    placeholder="请输入"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('状态') + ':'" prop="status">
                                <el-select
                                    v-model="searchParam.status"
                                    placehodler="请选择"
                                    clearable
                                    style="width: 100%"
                                    @change="handleStatusSelectChange"
                                >
                                    <el-option
                                        v-for="item in options.infomationStatusList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </ConditionCard>
            <el-card class="body-card information-wrap" shadow="never" style="margin-top: 15px;">
                <div class="edu-page-title">{{ $t('workbench.systemNotice') }}</div>
                <div class="table-operate">
                    <el-button class="operate-add" type="primary" @click="addInformation">
                        新增
                    </el-button>
                    <el-button
                        v-if="hideStatus"
                        class="operate-add"
                        type="primary"
                        @click="invalidateInformations"
                    >
                        批量失效
                    </el-button>
                </div>
                <edu-table
                    :selection="hideStatus"
                    :data="myInformationList"
                    :total="searchParam.total"
                    ref="myInformationTable"
                    @selection-change="handleSelectionChange"
                    :pageSize="searchParam.pageSize_"
                    :order="false"
                    @page-change="onCurrentPageChange"
                    paginationLayout="total, sizes, prev, pager, next, jumper"
                    paginationStyle=""
                >
                    <edu-table-column label="信息标题" prop="msgTitle" show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <a @click="viewInformation(scope.row.id)">
                                <span>{{ scope.row.title }}</span>
                            </a>
                        </template>
                    </edu-table-column>
                    <edu-table-column
                        label="面向用户"
                        prop="userOriented"
                        show-overflow-tooltip="true"
                    />
                    <edu-table-column label="发布日期" prop="publishTime" width="150" />
                    <edu-table-column label="状态" width="120px">
                        <template slot-scope="scope">
                            <span>
                                <el-tag v-if="scope.row.status == '1'" type="info">草稿</el-tag>
                                <el-tag v-if="scope.row.status == '2'" type="warning">
                                    审核中
                                </el-tag>
                                <template v-if="scope.row.status == '3'">
                                    <el-tag v-if="scope.row.tagStatus == '2'" type="danger">
                                        失效
                                    </el-tag>
                                    <el-tag v-else type="success">已发布</el-tag>
                                </template>
                            </span>
                        </template>
                    </edu-table-column>
                    <edu-table-column :label="$t('message.operating')" width="150">
                        <template slot-scope="scope">
                            <el-button
                                v-if="scope.row.status == '1'"
                                type="text"
                                @click="checkInformation(scope.row.id)"
                            >
                                提交
                            </el-button>
                            <el-button
                                v-if="scope.row.status == '1'"
                                type="text"
                                @click="editInformation(scope.row.id)"
                            >
                                {{ $t('message.edit') }}
                            </el-button>
                            <el-button
                                v-if="
                                    scope.row.tagStatus != '2' &&
                                        scope.row.status == '3' &&
                                        hideStatus 
                                "
                                type="text"
                                @click="invalidateInformation(scope.row.id)"
                            >
                                失效
                            </el-button>
                            <el-button
                                v-if="scope.row.tagStatus != '2' && scope.row.status == '3'"
                                type="text"
                                @click="editInformation(scope.row.id)"
                            >
                                编辑
                            </el-button>
                            <!-- <el-button type="text" @click="viewInformation(scope.row.id)">查看</el-button> -->
                            <el-button
                                v-if="scope.row.status == '1' && hideStatus "
                                type="text"
                                @click="delInformation(scope.row.id)"
                            >
                                删除
                            </el-button>
                        </template>
                    </edu-table-column>
                </edu-table>
            </el-card>
        </div>
        <information-management
            :infoId="infoId"
            :hideStatus="hideStatus"
            v-if="pageIndex === 2"
            @backToList="backToList"
        ></information-management>
        <edu-dialog
            title="信息公告"
            width="1000px"
            class="systemDialog"
            :visible.sync="showInfoViewDialog"
            v-if="showInfoViewDialog"
            :showCancelBtn="false"
            :autoHeight="false"
            confirmBtnText="确定"
            @confirm="confirmMsg"
            :close-on-click-modal="false"
        >
            <div class="information-view">
                <h1 class="info-title">{{ information.title }}</h1>
                <div class="info-date">发布日期：{{ information.publishTime }}</div>
                <div class="info-content" v-html="information.content"></div>
                <div class="info-attach">
                    <div v-for="(attach, index) in information.commonAttachmentList" :key="index">
                        <div
                            class="attach-item"
                            @click="handleDownloadfile(attach.fileLacation, attach.fileName)"
                        >
                            <i class="el-icon-document"></i>
                            <span class="attach-name">{{ attach.fileName }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </edu-dialog>
        <edu-dialog
            title="提交审核"
            width="1000px"
            class="systemDialog"
            :visible.sync="showInfoCheckDialog"
            :autoHeight="false"
            :close-on-click-modal="false"
            @close="closeInfoCheckDialog"
        >
            <div class="information-view">
                <el-form
                    :model="informationCheckForm"
                    ref="informationCheckForm"
                    label-width="90px"
                    :rules="checkRules"
                >
                    <h1 class="info-title">{{ information.title }}</h1>
                    <div class="info-date">发布日期：{{ information.publishTime }}</div>
                    <div class="info-content" v-html="information.content"></div>
                    <div class="info-attach">
                        <div
                            v-for="(attach, index) in information.commonAttachmentList"
                            :key="index"
                        >
                            <div
                                class="attach-item"
                                @click="handleDownloadfile(attach.fileLacation, attach.fileName)"
                            >
                                <i class="el-icon-document"></i>
                                <span class="attach-name">{{ attach.fileName }}</span>
                            </div>
                        </div>
                    </div>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="材料说明:" prop="editExplain">
                                <el-input
                                    type="textarea"
                                    :rows="3"
                                    placeholder="请输入内容"
                                    v-model="informationCheckForm.editExplain"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item
                                label="证明材料:"
                                ref="informationFileList"
                                prop="informationFileList"
                            >
                                <el-upload
                                    :headers="{ 'X-Token': $store.state.session.sessionid }"
                                    :data="{ bucketname: 'face', folderpath: 'file' }"
                                    :on-remove="handleFileRemove"
                                    :on-success="handleUploadSuccess"
                                    :file-list="informationCheckForm.informationFileList"
                                    class="upload-demo"
                                    action="/api/commonservice/obsfile/uploadfile"
                                >
                                    <el-button class="operate-add" type="primary">
                                        上传附件
                                    </el-button>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-row slot="buttons">
                <el-col :span="24">
                    <div class="btn-list">
                        <el-button @click="showInfoCheckDialog = false">取消</el-button>
                        <el-button type="primary" @click="handlesubmitPublicMsgApproval">
                            确定
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </edu-dialog>
        <el-dialog
            title="提示"
            :visible.sync="confirmCheckDialogVisible"
            :show-close="false"
            width="35%"
        >
            <span>信息公告已提交审核，可前往我的信息发布中查看审批进度</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="refreshMyInformation">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getPublicMsgList,
    getPublicMsgDetail,
    getPublicMsgStatus,
    deletePublicMsg,
    submitPublicMsgApproval
} from 'common/src/api/public/information'
import InformationView from './InformationView'
import InformationManagement from './informationManagement'
import { queryDic } from 'common/src/api/dictionary'
import { downloadfile } from 'common/src/api/upload'
import filters from 'common/src/filters'
import mixin from 'common/src/mixins/index'

export default {
    name: 'myInformation',
    mixins: [mixin],
    components: {
        'information-view': InformationView,
        InformationManagement
    },
    data() {
        var validatFile = (rule, value, callback) => {
            if (value.length) {
                callback()
            } else {
                return callback(new Error('请上传证明材料'))
            }
        }
        return {
            queryForm:{},
            pageIndex: 1,
            hideState:true,//判断当前用户组是否在公告权限控制组内
            breadPath: {
                label: '系统公告',
                key: 1,
                children: [
                    {
                        key: 2,
                        label: ''
                    }
                ]
            },
            myInformationList: [],
            searchParam: {
                title: '',
                status: '',
                pageNum_: 1,
                pageSize_: 20
            },
            invalidateRows: [],
            showInfoViewDialog: false,
            showInfoCheckDialog: false,
            viewInforamtionId: '',
            information: {},
            informationCheckForm: {
                type: 20,
                editExplain: '',
                informationFileList: []
            },
            informationFiles: '',
            checkRules: {
                // editExplain: [
                //     {
                //         required: true,
                //         message: this.$t("information.msg.editExplain"),
                //         trigger: ['blur', 'change']
                //     }
                // ],
                // informationFileList: [
                //   {
                //         required: true,
                //         trigger: 'change',
                //         validator: validatFile
                //     }
                // ]
            },
            informationFileList: [],
            confirmCheckDialogVisible: false,
            options: {
                infomationStatusList: [
                    {
                        key: 1,
                        label: '草稿',
                        value: 1
                    },
                    {
                        key: 2,
                        label: '审核中',
                        value: 2
                    },
                    {
                        key: 3,
                        label: '已发布',
                        value: 3
                    }
                ]
            }
        }
    },
    watch: {
        pageIndex(val) {
            if (val === 1) {
                document.getElementsByClassName('el-main')[0].scrollTop = 0
                this.searchParam.pageNum_ = 1
                this.searchMyInformations()
            }
        }
    },
    created() {
        let user = this.global.currentUser
        //hiddenState 判断当前用户是否在公告权限控制组内 1：是；0：否
        this.hideStatus = +user.hiddenState === 1
    },
    mounted() {
           this.searchMyInformations()
    },
    methods: {
            
        handleDownloadfile(objectkey, filename) {
            if (!objectkey) return
            downloadfile(filename ? objectkey + `&realName=${filename}` : objectkey)
        },
        reset() {
            this.searchParam.title = ''
            this.searchParam.status = ''
            this.searchMyInformations()
        },
        searchMyInformations() {
            getPublicMsgList(this.searchParam).then(res => {
                if (res.code == 200) {
                    this.myInformationList = res.data.list.map(item => {
                        item.publishTime = this.formatTime(item.publishTime)
                        item.userOriented = item.faceUserName
                        return item
                    })
                    this.searchParam.pageNum_ = res.data.pageNum_
                    this.searchParam.pageSize_ = res.data.pageSize_
                    this.searchParam.total = res.data.total_
                }
            })
        },
        formatTime(time) {
            return time.slice(0, 10).replace(/-/g, '/')
        },
        handleSelectionChange(rows) {
            this.invalidateRows = rows
        },
        handleStatusSelectChange() {
            this.searchMyInformations()
        },
        invalidateInformations() {
            if (this.invalidateRows.length == 0) {
                this.$message({
                    type: 'warning',
                    message: '请选择要失效的信息公告'
                })
            } else {
                const ids = this.invalidateRows
                    .filter(item => item.status == '3')
                    .map(item => item.id)
                if (ids && ids.length == 0) {
                    this.$message({
                        type: 'warning',
                        message: '没有选择已发布的信息公告'
                    })
                } else {
                    this.$confirm('是否确认失效已发布的信息公告?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        getPublicMsgStatus({ ids }).then(res => {
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            })
                            // 刷新信息列表
                            this.searchMyInformations()
                            // 清空选择
                            this.$refs.myInformationTable.clearSelection()
                            this.invalidateRows = []
                        })
                    })
                }
            }
        },
        checkInformation(id) {
            getPublicMsgDetail(id).then(res => {
                this.information = res.data
                this.information.publishTime = this.formatTime(this.information.publishTime)
                // 显示审核信息
                this.showInfoCheckDialog = true
                this.informationCheckForm.id = id
            })
        },
        handlesubmitPublicMsgApproval() {
            this.$refs.informationCheckForm.validate(valid => {
                if (!valid) {
                    return
                }
                // if (this.informationFileList.length == 0) {
                //     this.$message({
                //         type: "error",
                //         message: "请上传证明材料!"
                //     });
                //     return;
                // }
                submitPublicMsgApproval(this.informationCheckForm).then(res => {
                    if (res.code == 200) {
                        this.handleCheckSuccess()
                    }
                })
            })
        },
        closeInfoCheckDialog() {
            this.$refs.informationCheckForm.resetFields()
        },
        handleCheckSuccess() {
            this.showInfoCheckDialog = false
            this.confirmCheckDialogVisible = true
        },
        refreshMyInformation() {
            this.confirmCheckDialogVisible = false
            this.searchMyInformations()
        },
        editInformation(id) {
            this.infoId = id
            this.pageIndex = 2
            this.breadPath.children[0].label = `${this.$t('message.edit')}公告`
        },
        invalidateInformation(id) {
            this.$confirm('该公告是否确认失效?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                getPublicMsgStatus({ ids: [id] }).then(res => {
                    this.$message({ type: 'success', message: '操作成功!' })
                    // 刷新信息列表
                    this.searchMyInformations()
                })
            })
        },
        viewInformation(id) {
            getPublicMsgDetail(id).then(res => {
                this.information = res.data
                this.information.publishTime = this.formatTime(this.information.publishTime)
                // 显示查看信息
                this.showInfoViewDialog = true
            })
        },
        delInformation(id) {
            this.$confirm('您确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deletePublicMsg({ ids: [id] }).then(res => {
                    this.$message({ type: 'success', message: '操作成功!' })
                    // 刷新信息列表
                    this.searchMyInformations()
                })
            })
        },
        handlePageNumChange(val) {
            this.searchParam.pageNum_ = val
            this.searchMyInformations()
        },
        handleSizeChange(val) {
            this.searchParam.pageSize_ = val
            this.searchMyInformations()
        },
        onCurrentPageChange(pager) {
            this.searchParam.pageSize_ = pager.pageSize
            this.searchParam.pageNum_ = pager.pageNum
            this.searchMyInformations()
        },
        addInformation: function() {
            this.infoId = ''
            this.pageIndex = 2
            this.breadPath.children[0].label = '新增公告'
        },
        handleFileRemove(file, fileList) {
            this.informationFileList = fileList
            this.informationCheckForm.informationFileList = fileList
            if (fileList.length > 0) {
                this.informationFiles = 'uploaded'
            } else {
                this.informationFiles = ''
            }
            this.informationCheckForm.evidenceList = this.setInformationAttachList(fileList)
        },
        handleUploadSuccess(res, file, fileList) {
            if (fileList.length > 0) {
                this.informationFiles = 'uploaded'
            } else {
                this.informationFiles = ''
            }
            this.informationFileList = fileList
            this.informationCheckForm.informationFileList = fileList
            this.informationCheckForm.evidenceList = this.setInformationAttachList(fileList)
            this.$refs.informationFileList.clearValidate()
        },
        setInformationAttachList(fileList) {
            let attachList = []
            fileList.forEach(item => {
                if (item.response && item.response.data) {
                    const uploadedObj = item.response.data[item.name]
                    if (uploadedObj) {
                        attachList.push(uploadedObj.objectkey)
                    }
                }
            })
            return attachList
        },
        backToList() {
            this.pageIndex = 1
        },
        confirmMsg() {
            this.showInfoViewDialog = false
        }
    }
}
</script>

<style lang="scss" scoped>
.information-wrap {
    //   height: 776px;
}
.body-card {
    padding: 10px;
}
.table-operate {
    padding-bottom: 15px;
    text-align: right;
    .operate-add {
        margin-right: 10px;
    }
}
.information-view {
    .info-title {
        margin-top: 25px;
    }
    .info-title,
    .info-date {
        text-align: center;
    }
    .info-content {
        margin-top: 15px;
        max-width: 100%;
    }
    .info-attach {
        padding: 10px 0;
        .attach-item {
            display: inline-block;
            padding: 3px 0;
            .attach-name {
                margin-left: 5px;
                cursor: pointer;
            }
            &:hover {
                .attach-name {
                    color: #409eff;
                }
            }
        }
    }
    .btn-list {
        text-align: right;
    }
}
</style>
